<template>
    <div class="news-item">
        <div class="news-img" v-if="item.img">
            <a href="javascript:void(0);" @click="clickEvent('img')">
                <img :src="item.img" :alt="title" />
            </a>
        </div>
        <h2>
            <a href="javascript:void(0);" @click="clickEvent('title')" :title="title">{{title}}</a>
        </h2>
        <p class="news-desc">{{item.desc}}</p>
        <div class="news-info" :style="infoStyle">
            <span v-if="item.user">
                <a href="javascript:void(0);" @click="clickEvent('user')">{{item.user}}</a>
            </span>
            <span v-if="item.date">时间：{{item.date}}</span>
            <span v-if="item.read">阅读：{{item.read}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "newsItem",
    props: {
        item: {
            type: Object,
            default: () => {
                return {
                    title: "标题",
                    img: "图片URL",
                    desc: "简述",
                    user: "用户名",
                    date: "时间",
                    read: "阅读数"
                };
            }
        },
        title: {
            type: String,
            required: true
        },
        img: {
            type: String,
            default: ""
        },
        desc: {
            type: String,
            default: ""
        }
    },
    computed: {
        infoStyle: function() {
            return {
                clear: this.item.desc ? "" : "both"
            };
        }
    },
    methods: {
        // 点击事件
        clickEvent(ele) {
            let data = {
                el: ele,
                item: this.item,
                title: this.title
            };
            this.$emit("clickEvent", data);
        }
    }
};
</script>

<style lang="less" scoped>
.news-item {
    position: relative;
    overflow: hidden;
    padding: 12px 8px;
    border-bottom: 1px dotted #ccc;

    img {
        border: 0;
        display: block;
    }

    a {
        text-decoration: none;
        color: #333;

        &:hover {
            color: #1183fb;
        }
    }

    h2 {
        font-size: 18px;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        color: #3f3f3f;
    }
    .news-img {
        display: block;
        float: right;
        width: 100px;
        height: 100px;
        overflow: hidden;
        margin-left: 20px;
        border-radius: 4px;
        img {
            width: 100%;
            min-height: 100%;
            transition: all 0.5s;

            &:hover {
                transform: scale(1.1);
            }
        }
    }

    &:last-child {
        margin-bottom: 0;
    }

    .news-desc {
        overflow: hidden;
        text-overflow: ellipsis;
        box-orient: vertical;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        font-size: 14px;
        color: #666;
    }
    .news-info {
        color: #888;
        font-size: 13px;
        margin-top: 10px;
        span {
            margin-right: 10px;
        }
    }
}

@media screen and (max-width: 640px) {
    .news-item {
        h2 {
            font-size: 16px;
            white-space: initial;
        }
        .news-desc {
            line-clamp: 3;
            -webkit-line-clamp: 3;
        }
        .news-info {
            clear: both;
        }
    }
}
</style>